<template>
      <div id="headerbar">
            <div class="hbox">
                  <div class="container">
                        <div class="left">
                              欢迎访问河南盈友网络科技有限公司！
                        </div>
                        <div class="right">
                              <div class="shenqing">
                                    <img src="../../assets/img/daili.png" alt="">
                                    <div class="txt">申请代理商</div>
                              </div>
                              <div class="phone">
                                    <img src="../../assets/img/tel.png" alt="">
                                    <div class="info">
                                          <div class="top">电话咨询</div>
                                          <div class="tel">400-187-8578</div>
                                    </div>
                              </div>
                        </div>
                  </div>
            </div>
            <div class="navbarbox">
                  <div class="navbar">
                        <div class="left">
                              <img src="../../assets/img/logo.png" alt="">
                        </div>
                        <div class="right">
                              <div class="nav">
                                    <div class="item" v-for="(item, index) in navbar" :key="index" >
                                          <router-link :to="item.route" target="_blank">
                                                {{ item.name }}
                                          </router-link>
                                    </div>
                                    
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        navbar: [
                              {
                                    name: "首页",
                                    route: "/"
                              },
                              {
                                    name: "产品中心",
                                    route: "/product"
                              },
                              {
                                    name: "全国招募",
                                    route: "/zhaomu"
                              },
                              {
                                    name: "新闻动态",
                                    route: "/news"
                              },
                              {
                                    name: "关于我们",
                                    route: "/about"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#headerbar {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      .hbox{
            background-color: #162d79;
            width: 100%;
            margin: 0 auto;
            .container {
                  width: 1440px;
                  margin: 0 auto;
                  display: flex;
                  justify-content: space-between;
                  height: 50px;
                  line-height: 50px;
                  .left {
                        font-size: 18px;
                  }
                  .right {
                        display: flex;
                        
                        .shenqing {
                              display: flex;
                              align-items: center;
                              font-size: 18px;
                              img {
                                    width: 27px;
                                    height: 27px;
                                    display: block;
                              }
                              .txt {
                                    margin-left: 10px;
                              }
                        }
                        .phone {
                              display: flex;
                              align-items: center;
                              margin-left: 30px;
                              .info {
                                    margin-left: 10px;
                              }
                              .top {
                                    font-size: 14px;
                                    line-height: 14px;
                                    
                              }
                              .tel {
                                    font-size: 24px;
                                    line-height: 24px;
                              }
                              img {
                                    width: 32px;
                                    height: 32px;
                                    display: block;
                              }
                        }
                  }
            }
      }
      
      .navbarbox {
            width: 100%;
            background-color: #fff;
            .navbar {
                  width: 1440px;
                  margin: 0 auto;
                  display: flex;
                  height: 80px;
                  line-height: 80px;
                  align-items: center;
                  justify-content: space-between;
                  color: #000;
                  a {
                     color: #000;   
                  }
                  .left {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        
                  }
                  .right {
                        .nav {
                              flex:1;
                              display: flex;
                              .item {
                                    width: 150px;
                                    text-align: center;
                                    font-size: 24px;
                                    cursor: pointer;
                              }
                        }
                  }
            }
      }
}
</style>